<style lang="scss">
.basic {
    .null{
        min-height:300px;
        padding:10px;
        background:#fff;
    }
    .card {
        .card-define {
            margin: 20px 72px;
            font-size: 14px;
            line-height: 36px;
        }
        .card-detail {
            img {
                height: 165px;
            }
            .img-title {
                width: 225px;
                text-align: center;
            }
        }
        .detail-structure {
            overflow: hidden;
        }
    }
}
</style>
<template>
    <div class="basic content-mask" v-loading="loading">
        <div class="card" v-if="drugId">
            <div class="card-title"> <span class="title-main">{{drug.chName}}</span> <span v-if="drug.drugName" class="title-english">({{drug.drugName}})</span></div>
            <p class="card-define" v-text="drug.descCh ? drug.descCh : drug.descEn"></p>
            <div class="card-detail">
                <el-row>
                    <el-col :span="2">通用名</el-col>
                    <el-col :span="6">{{drug.drugName}}</el-col>
                    <el-col :span="2">中文名称</el-col>
                    <el-col :span="6">{{drug.chName}}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="2">商品名</el-col>
                    <el-col :span="6" v-text="drugObject.tradename ? drugObject.tradename : ''"></el-col>
                    <el-col :span="2">药物类型</el-col>
                    <el-col :span="6">{{drug.drugType | getType}}</el-col>
                </el-row>
                <el-row>          
                    <el-col :span="2">别名</el-col>
                    <el-col :span="6" v-text="drugObject.synonymname ? drugObject.synonymname : ''"></el-col>                  
                </el-row>
            </div>
        </div>
        <div class="card" v-if="drugId">
            <div class="card-title">
                <img src="static/image/ywjg.png" >
                <span class="title-text">药物结构</span>
            </div>
            <div class="card-detail detail-structure">
                <el-row>
                    <el-col :span="16">
                        <el-row>
                            <el-col :span="3">化学式</el-col>
                            <el-col :span="21" v-html='drugStructure.chemicalFormula.replace(/(\d+)/g, "<sub>$1</sub>")'></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="3">分子量</el-col>
                            <el-col :span="21">{{drugStructure.weight}}</el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="3"> CAS number</el-col>
                            <el-col :span="21">{{drugStructure.cas}}</el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="3"> SMILES</el-col>
                            <el-col :span="21">{{drugStructure.smiles}}</el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="3"> IUPAC Name</el-col>
                            <el-col :span="21">{{drugStructure.iupac}}</el-col>
                        </el-row>                        
                    </el-col>
                    <el-col :span="8" >
                        <img v-if="drug && drug.drugId && drug.pic2d == 1" :src="imgUrl+drug.drugId+'_2D.png'" />
                        <div v-if="drug.pic3d == 1" class="img-title">3D结构(PDBe):&nbsp;<el-button type="text" @click="openMsgBox">IRE</el-button> </div>
                    </el-col>
                </el-row>
            </div>

            <div class="card-title">
                <img src="static/image/zyjl.png" >
                <span class="title-text">作用机理</span>                
            </div>
            <div class="card-detail">
                <el-table :data="moas" border style="width: 100%">
                    <el-table-column prop="name" label="药物名称" width="180"></el-table-column>
                    <el-table-column label="靶点" min-width="200">
                        <template slot-scope="scope">
                            <a @click="goTarget(scope.row)" href="javascript:void(0)">{{scope.row.target}}</a>
                        </template>
                    </el-table-column>
                    <el-table-column prop="mechanismofaction" label="作用机理" min-width="200"></el-table-column>
                    <el-table-column label="引用" width="180">
                        <template slot-scope="scope" v-if="scope.row.ref">
                            <a :title="scope.row.link.split(',')[index]" target="_blank" :href="scope.row.link.split(',')[index]" v-for="(item,index) in (scope.row.ref.split(','))" :key="index">{{item}}</br></a>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <div class="null" v-if="!drugId">
            请先选择药物
        </div>
        <el-dialog :visible.sync="dialogVisible" width="640px" :before-close="handleClose">
            <d-modal v-if="dialogVisible" :molName="molName" :drugId="molId"></d-modal>
        </el-dialog>        
    </div>
</template>
<script>
import {medicine} from 'api/index.js';
import dModal from "@/components/3dmol.vue";
import { imgUrl } from '@/common/js/Base.js';
export default {
    name: "basic", //药物基本信息
    data() {
        return {
            molName:"",
            drugId:"",
            molId:"",
            dialogVisible: false,
            loading: false,
            imgUrl:imgUrl,
            drugObject:{
                tradename:"",//商品名
                synonymname:"",//别名
            },
            drug:{},
            drugStructure:{}, //分子结构
            moas:[]           //作用机理
        };
    },
    filters:{
        getType(type){
            if(type == "Drug"){
                return '化疗药';
            }else if(type == "Target Drug"){
                return '靶向药';
            }
        }
    },
    methods: {
        openMsgBox() {
            this.dialogVisible = true;
        },
        goTarget(row) {
            this.$router.push("/targetSpot?targetId="+row.targetId);
        },
        //获取药物基本信息
        getDrug(){
            let obj = {
                id : this.drugId
            };
            this.loading = true;
            medicine.getDrugById(obj).then((data)=>{
                if(data.status == 200){
                   if(data.data){
                        this.drugObject = data.data;
                        this.getDetails();
                   }
                }else{
                    this.$message.error(data.msg);
                }
                this.loading = false;
            }).catch(error => {
                this.loading = false;
                this.$message.error("药品列表失败");
            });
        },
        //获取具体信息
        getDetails(){
            //药物基本信息
            if(this.drugObject.drug){
                this.drug = this.drugObject.drug;
            }
            if(this.drug.drugName){
                this.molName = this.drug.chName+'('+this.drug.drugName+')';
            }else{
                this.molName = this.drug.chName;
            }
            this.molId = this.drug.drugId;
            //药物结构
            if(this.drugObject.drugStructure){
                this.drugStructure = this.drugObject.drugStructure;
            }
            //作用机理
            if(this.drugObject.moas && this.drugObject.moas.length > 0){
                this.moas = this.drugObject.moas;
            }else{
                this.moas = [];
            }
            
        }
    },
    mounted() {
        this.drugId = this.$store.state.searchId ? this.$store.state.searchId : '';
        if(this.drugId){
            this.getDrug();
        }
    },
    watch:{
        "$store.state.searchId":function(){
            if(this.$store.state.searchId && this.drugId != this.$store.state.searchId){
                this.drugId = this.$store.state.searchId;
                this.dialogVisible = false;
                this.getDrug();
            }
        }
    },
    components: {
        dModal
    }
};
</script>
